import axios from 'axios'

import { VUE_APP_BASE_URL } from '@/config'
import { getToken, setToken, setRefreshToken, getRefreshToken } from './token'
import router from '@/router'

import { updateTokenAPI } from '@/api/User'
const request = axios.create({
  baseURL: VUE_APP_BASE_URL
})

// 请求拦截器
request.interceptors.request.use(config => {
  const token = getToken()
  const refreshToken = getRefreshToken()
  // 获取token，如果token有值，
  if (token) {
    // 则通过请求头的Authorization字段统一给后台携带过去
    config.headers.Authorization = `Bearer ${token}`
  } else if (refreshToken) { // 没有token，则携带refreshToken
    config.headers.Authorization = `Bearer ${refreshToken}`
  }
  return config
}, e => {
  return Promise.reject(e)
})

// 目标：实现token的无感知刷新，token续签
// 1. 定义更新token的接口，通过请求头携带refreshToken给后台
// 2.当token过期了，会走到响应拦截器的401判断中，
// 3.调用更新token的接口，用refreshToken换的一个新token，
// 4.把新token保存到vuex中（插件会帮我们自动同步到本地）
// 5.用新token继续上次失败（未遂）的请求即可

// 响应拦截器
request.interceptors.response.use(resp => {
  // 今后组件拿到的数据，无需在.data一次，拿到的就是数据了
  return resp.data
}, async e => {
  // refreshToken过期
  if (e.response.data.message === 'refresh_token失效') {
    // 清空token和refreshToken，
    setToken('')
    setRefreshToken('')
    // router实例上的
    // currentRoute属性就是组件的$route，他们是同一个对象
    // options.routes: 配置的所有路由规则对象
    // 跳转到登录页，有感知的刷新，携带当前路由路径给登录页，今后可以回跳
    router.replace(`/login?redirect=${router.currentRoute.path}`)
  }
  // token过期
  if (e.response.status === 401) {
    // 401 表示token过期
    // 清空vuex中的token
    setToken('')
    const resp = await updateTokenAPI()
    setToken(resp.data.token)
    return request(e.config)
  }
  return Promise.reject(e)
})

export default request
